<template>
    <div class="logout-shadow" v-show="logoutPage.show" @click="logoutPage.close">
        <div class="logout-model" @click.stop="">
            <div class="icon" style="--icon: url(/icon/toast/prompt.svg)"></div>
            <div class="text">Do you want to log out?</div>
            <div class="btn-box">
                <div class="btn" style="background-color: var(--active-color);" @click="yes">Yes</div>
                <div class="btn" style="background-color: var(--negative-number-color);" @click="no">No</div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { logoutPage, authService } from '@/service/auth';
import { loading } from '@/service/status';

function yes() {
    loading.value = true;
    authService.logout();
    logoutPage.close();
    setTimeout(() => {
        loading.value = false;
    }, 500);
}

function no() {
    logoutPage.close();
}
</script>

<style scoped lang="less">
.logout-shadow {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    background-color: #88888880;

    .logout-model {
        width: 25vw;
        height: 15vw;
        background-color: #fff;
        border-radius: 0.5vw;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 1vw;

        .icon {
            --size: 5vw;
            --w: var(--size);
            --h: var(--size);
        }

        .text {
            font-size: 1vw;
            font-weight: 500;
            color: var(--text-color);
        }

        .btn-box {
            display: flex;
            align-items: center;
            gap: 1vw;

            .btn {
                font-size: 1vw;
                font-weight: 500;
                color: #fff;
                padding: 0.5vw 1vw;
                border-radius: 0.5vw;
            }
        }
    }
}
</style>